import React from"react"
//关于React组件的1文件后缀说明
//如果当前组件中没有使用到TS,文件后缀可以是.js/.jsx
//如果当前组件用到了TS语法,文件后缀必须是.ts/.tsx

//引入React的目的是为了支持JSX语法.
/*
    JSX=JavaScript XML
    jsx是一种React团队提供的一种语法糖，可以方便的编写React代码.
    jsx语法在React开发中是可选的,也就是说你可以不使用jsx，但React官方推荐使用jsx
    如果不使用jsx语法，就要使用React.createElement()来写代码，但是非常麻烦


    React支持两种编写组件的方式：类组件和函数式组件

    在类组件中jsx代码写在
    render()这个生命周期的return语句中。
    在函数式直接写在return里面
    jsx看上去非常像html结构，所以在不使用碎片语法的情况下，只能是单一根节点
    在react中没有指令，渲染声明式变量要使用{}语法(jsx语法)
    因为jsx不是HTML，它是JS代码所以在jsx中使用声明式变量要使用this来访问

    在react中元素的动态属性也是使用{}这种jsx语法

    在jsx语法，class要写出classname，for要写成htmlFor，tab写成tabIndex

    在jsx的{}可以使用js表达式,但不能使用js语句
    react元素(jsx元素)本质上是一个变量,对象,表达式,所以在jsx使用另一个jsx时,也要使用{}包裹起来.

    jsx元素不要定义到state中去.
    jsx支持无限嵌套,这是父子组件关系的基础(后面再说).
    jsx渲染元素时,如果被渲染的变量是Boolean值或者是undifined,null都将被忽略

    jsx在浏览器默认不支持，是webpack和@bebel-preset-react进行编译的，编译的结果是一系列的React.createElement()的使用.

    jxs中新增了三个属性：key,ref,dangerouslySetInnerHTML. 在jsx中渲染文本字符串或者html字符串，默认是防注入攻击(xss)

    关于理解jsx是不可变对象的问题
    在react中修改声明式变量，只能通过this.setState()这个API来修改，当声明式变量发生变化时，render()这个生命周期会重新执行,那么问题来了，如果render方法每次都重新执行，那么它所return出来的这一堆jsx元素是不是都要重新渲染呢?答案是否定的
    解释：每当有风吹草动时，render方法都会重新执行，它所对应的return语句也会运行，但是DOM结构没有被完全替换与更新，只更新diff运算的结果。原因是因为jsx是不可变对象，所以每次render时都会返回一个新的jsx对象(对应的就是一个新的虚拟DOM),接着触发diff运算(找到两个虚拟DOM中变化的赃节点)，也就找到了这两个jsx对象的差异，react只更新找到的差异
*/
// 在jsx代码中可以添加注释，要使用{/* */}来写注释

var oH1 = <h1>asda</h1>
var oDiv = <div>{oH1}</div>
//类组件(有生命周期等特性)
export default class TestJsx extends React.Component{
    constructor(props) {
        super(props)
        //定义声明式变量，类似vue中的data
        //在react中，这些声明式变量不能使用this访问，要使用this.state访问
        this.state = {
            count: 1,
            title: '来自后端的title'
        }
    }
    //是一个生命周期，用于把JSX元素渲染到DOM上
    render() {
        let { count } = this.state
        let { title } = this.state
        return (
            <div>
                
                <h1>Hello class component</h1>
                <h1
                    title={title}
                    className='box'
                >{count}</h1>
                {oDiv}
            </div>
        )
    }
}
